<%--
  Created by IntelliJ IDEA.
  User: 陈鹏
  Date: 2021/3/29
  Time: 11:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        .ChapterRe-box  .ChapterRe-table .ChapterRe-thead .ChapterRe-tr1 .remark-Dao .add-remark a{
            text-decoration: none;
            color: red;
        }
        .ChapterRe-box .ChapterRemark-table{
            margin: 5px auto 0 auto;
            border: 1px solid black;
            width: 800px;
        }
        .ChapterRe-box .ChapterRemark-table .ChapterRemark-tbody {
            /*background-color: red;*/
            border: 1px solid black;
        }
        .ChapterRe-box .ChapterRemark-table .ChapterRemark-tbody .ChapterRemark-tr .ChapterRemark-td1{
            background-color: #ea9999;
            width: 200px;
        }
        .ChapterRe-box .ChapterRemark-table .ChapterRemark-tbody .ChapterRemark-tr .ChapterRemark-td2{
            background-color: #f4f4f4;
        }
        .ChapterRe-box .ChapterRemark-table .ChapterRemark-tbody .ChapterRemark-tr .ChapterRemark-td2 .content-contentFram .content{
            height: 100px;
        }
        .ChapterRe-box .ChapterRemark-table .ChapterRemark-tbody .ChapterRemark-tr .ChapterRemark-td2 .content-contentFram .content-Dao .reply{
            margin-left: 400px;
        }
        .ChapterRe-box .ChapterRemark-table .ChapterRemark-tbody .ChapterRemark-tr .ChapterRemark-td2 .content-contentFram .content-Dao .Towrite{
            background-color: #ea9999;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="ChapterRe-box">
    <table class="ChapterRemark-table">
        <thead class="ChapterRemark-thead">
        <tr class="ChapterRemark-tr1">
            <td class="ChapterRemark-td0">用户</td>
        </tr>
        </thead>
        <tbody class="ChapterRemark-tbody">
        <tr v-for="remark in remarks" class="ChapterRemark-tr">
            <td class="ChapterRemark-td1">
                <div class="remark-uid">{{remark.uid}}</div>
            </td>
            <td class="ChapterRemark-td2">
                <div class="content-contentFram">
                    <div class="content">{{remark.content}}</div>
                    <div class="content-Dao">
                        <button class="reply">回复</button>
                        <button class="delete-ChapterRemark" @click="_deleteRemarkForNove(remark.rid)" v-show="remark.uid==uid">删除</button>
                        <a href="/remark/toWriteRemarkPage?nid=1005&uid=1366140090&chapterid=8&type=2" class="Towrite">写评论</a>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script src="/comms/vue.js"></script>
<script src="/comms/jquery.js"></script>
<script>
    function request(url, method, fn, data) {
        $.ajax({
            url: url,
            data: data,
            method: method,
            dataType: "json",
            success: fn
        })
    }
</script>
<script>
    let v=new Vue({
        el:".ChapterRe-box",
        data:{
            Test:"章节评论",
            remarks:[],
            nid:"1005",
            uid:"1366140090",
            chapterid:"8",
            type:"1",
            request:"/remark/toWriteRemarkPage?nid="+"1005"+"&uid="+"1815168807"+"&chapterid&type=2",
            <%--request:"/remark/toWriteRemarkPage?nid="+"${sessionScope.nid}"+"&uid="+"${sessionScope.uid}"+"&chapterid&type=2",--%>
            test:this.nid,
            remarkFram:false,
        },
        created:function () {
            console.log("创建");
            this.initRemark();
        },
        methods: {
            initRemark: function (nid) {
                let this_ = this;
                request("/remark/selectRemarkForChapter?nid=" + this.nid+"&chapterid="+this.chapterid, "GET", function (data) {
                    if (data.flag) {
                        this_.remarks = data.data;
                    } else {
                        console.log("noData")
                    }
                })
            },

            /*删除总评*/
            _deleteRemarkForNove: function (id,uid) {
                let this_ = this;
                console.log(id)
                request("/remark/deleteRemarkForNovel?rid=" + id, "POST", function (data) {
                    if (data.flag) {
                        this_.initRemark(this_.nid);
                    } else {
                        console.log("deleteFailed")
                    }
                    this_.initRemark(this_.nid);
                })
            },
            _click: function () {
                console.log(this.test)
            },
        }
    })
</script>
</body>
</html>
